<template>
	<view class="fullBox">
		<scroll-view :scroll-y="isScroll" scroll-with-animation="true" style="height: 100vh;">
			<!-- 		<view class="toptips" v-if="remarks != ''">
				<view class="titleBlock">
					<view class="icon">
						<u-icon name="https://supply.zhongyimotor.com/upload/applet/refuse_reject_supplier@3x.png"
							width="36" height="36"></u-icon>
					</view>
					<view class="title">平台审核驳回</view>
				</view>
				<view class="content">
					{{remarks}}
				</view>
				<view class="dateTime">
					审核时间：2023/09/14 15:39:46
				</view>
			</view> -->
			<view class="steps">
				<view :class='details.current >= index ? "stepItem active" : "stepItem"'
					v-for="(item,index) in details.list" :key="index" @click="details.current = index">
					<view class="step">{{index+1}}</view>
					<view class="stepName">{{item.name}}</view>
				</view>
			</view>
			<view class="form">
				<u-form :error-type="['toast','message']" label-width="300" :model="details.form" ref="uForm">
					<view v-for="(result,j) in details.list" :key="j">
						<view :class='j === details.current?"sortTitle":"sortTitle display"'>{{result.name}}</view>
						<view :class='j === details.current?"":" display"' v-for="(item,index) in result.list"
							:key="index">
							<!-- 输入框 -->
							<u-form-item v-if="item.type === 'text'" :required="item.required" :label="item.name"
								:prop="item.key">
								<u-input :disabled="item.disabled" :type="item.type" v-model="details.form[item.key]"
									:placeholder="`请填写${item.name}`" @focus="onfocus" @blur="onBlur" />
								<view v-if="item.key == 'registerCapital'" slot='right' class="unit">
									万元
								</view>


								<view v-else slot='none' class="unit">
									万元
								</view>
							</u-form-item>

							<!-- 文本框 -->
							<u-form-item v-else-if="item.type === 'textarea'" :required="item.required"
								:label="item.name" :prop="item.key">
								<u-input :disabled="item.disabled" :type="item.type" v-model="details.form[item.key]"
									:placeholder="`请填写${item.name}`" :auto-height="false" />

							</u-form-item>
							<!-- 时间 -->
							<u-form-item v-else-if="item.type === 'time'" :required="item.required" :label="item.name"
								:prop="item.key" :ref="item.key">
								<c-time @change="onModelChange(item,$event)" :config="item"
									v-model="details.form[item.key]" :placeholder="`请选择${item.name}`" />
							</u-form-item>
							<!-- 中征码或机构信用代码 -->
							<u-form-item v-else-if="item.type === 'code'" :required="item.required" label-position="top"
								:label="item.name" :prop="item.key" class="codeInput" :border-bottom="false">
								<c-credit-code @change="onModelChange(item,$event)" :config="item"
									v-model="details.form[item.key]" />
							</u-form-item>
							<!-- 选择文件 -->
							<u-form-item v-else-if="item.type === 'file'" :required="item.required" label-position="top"
								:label="item.name" :prop="item.key" :ref="item.key">
								<c-file @change="onModelChange(item,$event)" :config="item"
									v-model="details.form[item.key]" />
							</u-form-item>
							<!-- 上传证件 -->
							<view v-else-if="item.type === 'card'">
								<view class="sortTitle"
									v-if="item.decribe == result.list[index+1].decribe && item.decribe">
									{{item.decribe}}
								</view>
								<u-form-item :prop="item.key" :ref="item.key">
									<c-card @change="onModelChange(item,$event)" :config="item"
										v-model="details.form[item.key]" />
								</u-form-item>
							</view>

						</view>
					</view>
				</u-form>
			</view>
			<view class="actions">
				<u-button v-if="details.current===details.list.length-1" @click="handleSubmit" type="success"
					shape="circle" :custom-style="buttonStyle">
					提交申请
				</u-button>
				<u-button v-else @click="onTabsChange(details.current+1)" type="success" shape="circle"
					:custom-style="buttonStyle">
					下一步
				</u-button>

			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		buttonStyle
	} from "@/utils/buttonStyle.js";
	import moment from "moment"
	import diyJson from './json.js'
	import cTime from './components/c-time/index.vue'
	import cCreditCode from './components/c-credit-code/index.vue'
	import cFile from './components/c-file/index.vue'
	import cCard from './components/c-card/index.vue'
	export default {
		components: {
			cTime,
			cCreditCode,
			cCard,
			cFile
		},
		data() {
			return {
				buttonStyle,
				details: {
					current: 0,
					rules: {},
					form: {},
					list: []
				},
				companyInfo: {},
				bankId: "",
				mode: "",
				remarks: "",
				isScroll: true
			}
		},
		onLoad(option) {
			this.bankId = option.bankId
			this.mode = option.mode
			if (this.mode == "new") {
				this.getCreditTemplate(this.bankId)
			} else {
				this.id = option.id
				this.remarks = option.remarks
				this.getCreditDetails(option.id)
			}

		},
		onReady() {

		},
		onShow() {

		},
		methods: {
			onfocus() {
				this.isScroll = false
			},
			onBlur() {
				this.isScroll = true
			},
			getCompanyInfo() {
				this.companyInfo = uni.getStorageSync("sellerInfo")
				this.details.list.forEach((res) => {
					res.list.forEach((item) => {
						if (this.companyInfo.hasOwnProperty(item.key)) {
							this.details.form[item.key] = this.companyInfo[item.key]
						}
					})
					this.details.form.establishDate = moment(this.details.form.establishDate).format('YYYY-MM-DD')
				})
			},
			onModelChange(item, data) {
				this.$set(this.details.form, item.key, data)
				// 触发校验
			},
			handleSubmit() {
				let that = this
				that.$refs.uForm.validate(valid => {
					if (valid) {
						let form = JSON.stringify(that.details.form)
						let list = JSON.stringify(that.details.list)
						if (that.mode == "new") {
							let params = {
								bankId: that.bankId,
								form: form,
							}
							that.$api.applyCredit(params).then((res) => {
								uni.showToast({
									title: '授信申请已提交',
									icon: 'success',
									duration: 2000,
									success: () => {
										setTimeout(() => {
											uni.navigateBack({
												delta: 1,
											})
										}, 2000)
									}
								});
							})
						} else {
							let params = {
								form: form,
								id: that.id
							}
							that.$api.reapplyCredit(params).then((res) => {
								uni.showToast({
									title: '授信申请已提交',
									icon: 'success',
									duration: 2000,
									success: () => {
										setTimeout(() => {
											let pages = getCurrentPages();
											let prePage = pages[pages.length - 2]
											uni.navigateBack({
												delta: 1
											})
										}, 2000)
									}
								});
							})
						}
					}
				})
			},
			onTabsChange(index) {
				this.details.current = index;
			},
			getCreditDetails(id) {
				let that = this
				let params = {
					id
				}
				that.$api.getCreditDetails(params).then((res) => {
					that.details.list = JSON.parse(res.result.list)
					that.details.form = JSON.parse(res.result.form)
					that.details = that.formRules(that.details)
					that.$refs.uForm.setRules(that.details.rules);
				})
			},
			getCreditTemplate(bankId) {
				let that = this
				let params = {
					bankId
				}
				that.$api.getCreditTemplate(params).then((res) => {
					that.details.list = JSON.parse(res.result)
					that.details = that.formRules(that.details)
					that.$refs.uForm.setRules(that.details.rules);
					that.getCompanyInfo()
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.toptips {
		width: 750rpx;
		padding: 30rpx;
		background: linear-gradient(360deg, #FFFFFF 0%, #FCEEED 100%);

		.titleBlock {
			display: flex;

			.icon {
				margin-top: 4rpx;
			}

			.title {
				font-size: 34rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #F76260;
				line-height: 48rpx;
				margin-left: 16rpx;
			}
		}

		.content {
			margin-top: 26rpx;
			font-size: 24rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #F76260;
			line-height: 36rpx;
		}

		.dateTime {
			margin-top: 20rpx;
			font-size: 24rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #888888;
			line-height: 36rpx;
		}
	}

	.steps {
		display: flex;
		padding: 30rpx 0;
		background: #FFF;

		.stepItem {
			width: 33.3333%;
			text-align: center;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #202020;
			position: relative;

			.step {
				width: 38rpx;
				height: 38rpx;
				background: #DEE1E7;
				color: #FFF;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				line-height: 38rpx;
				border-radius: 300rpx;
				margin: 0 auto 8rpx;
			}

			&::after {
				content: "";
				position: absolute;
				width: 70%;
				height: 2rpx;
				background: #DFDFE6;
				left: -35%;
				top: 19rpx;
			}

			&:nth-child(1) {
				&::after {
					content: none;
				}
			}

			&.active {
				.step {
					background: #0FBD7F;
				}

				&::after {
					background: #0FBD7F;
				}
			}
		}
	}

	.sortTitle {
		height: 68rpx;
		background: #F7F7F7;
		display: flex;
		line-height: 68rpx;
		padding: 0 30rpx;
		color: #969696;
		position: relative;
		margin-top: -2rpx;
		z-index: 2;
	}

	.actions {
		margin: 60rpx auto 0;
		width: 670rpx;
		padding-bottom: 60rpx;
	}

	.form {
		.display {
			display: none;
		}

		background: #FFF;

		/deep/.u-form-item {
			padding-left: 30rpx;
			padding-right: 30rpx;
			background: #FFF;
			font-size: 34rpx;
		}

		/deep/.u-form-item--left__content {
			padding-left: 10rpx;
		}

		/deep/.u-border-bottom:after,
		.u-border-left:after,
		.u-border-right:after,
		.u-border-top-bottom:after,
		.u-border-top:after,
		.u-border:after {
			left: 32rpx !important;
		}

		/deep/.u-form-item--left {
			display: inline;
		}

		/deep/textarea {
			height: 140rpx !important
		}

		.codeInput {
			/deep/.u-input {
				width: 630rpx !important;
				height: 68rpx !important;
				background: #F7F7F7 !important;
				border-radius: 6rpx !important;
				padding: 0 20rpx !important;
				margin-top: 30rpx;

				.u-input__input {
					font-size: 26rpx !important;
					font-family: PingFangSC-Regular, PingFang SC !important;
					font-weight: 400 !important;
					color: #969696 !important;
				}
			}
		}
	}
</style>